<template>
	<div>
		<form action="/">
			<van-search placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" show-action>
				<template #action>
					<div @click="onSearch">{{lous}}</div>
				</template>
			</van-search>
		</form>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<main>
				<div class="cont">
					<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
						<van-swipe-item v-for="item in bannerList" :key="item.id">
							<img :src="item.img" alt="" />
							<span>{{ item.txt }}</span>
						</van-swipe-item>
					</van-swipe>
					<van-grid :column-num="3">
						<van-grid-item v-for="value in xjr" :text="value.product_name" :icon="value.url"
							@click="getData(value._id)" />
						</van-grid-item>
					</van-grid>
				</div>
			</main>
		</van-pull-refresh>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	import Vue from "vue";
	import {
		Swipe,
		SwipeItem
	} from "vant";
	import axios from "axios";
	Vue.use(Swipe);
	Vue.use(SwipeItem);
	export default {
		data() {
			return {
				xjr: '',
				page: 1,
				bannerList: [],
				refreshing: false,
				lous: ''
			};
		},
		created() {
			this.bannerList = [{
					id: 1,
					img: "https://www.haohua.com/upload/image/2019-06/19/2ccee_697e.jpg",
				},
				{
					id: 2,
					img: "https://www.haohua.com/upload/image/2019-06/19/2ccef_b1b8.jpg",
				},
				{
					id: 3,
					img: "https://www.haohua.com/upload/image/2019-06/19/2ccf1_bf7f.jpg",
				},
			];
		},
		methods: {
			onSearch(val) {
				if (JSON.parse(window.localStorage.getItem('user'))) {
					window.localStorage.removeItem("user")
					this.lous = "登入"
				} else {
					this.lous = "注销"
					this.$router.push("/user")
				}
			},
			onCancel() {
				Toast("取消");
			},
			getData(id) {
				this.$router.push(`/details/${id}`)
			},
			onRefresh() {
				this.$axios({
					url: "/api/xjr/xjr",
					params: {
						_page: ++this.page,
						_limit: 4
					},
				}).then((res) => {
					setTimeout(() => {
						if (res.data.msg === '没有跟多数据') {
							
						} else if (res.data.err === 0) {
							this.xjr = {
								...this.xjr,
								...res.data.data
							}
						}
						this.refreshing = false;
						this.isLoading = false;
					}, 1000)
				});
			},
		},
		mounted() {
			this.$axios({
				url: '/api/xjr/xjr',
				params: {
					_limit: 4
				}
			}).then(res => {
				this.xjr = res.data.data
			})
			if (!window.localStorage.getItem("user")) {
				this.lous = "登入"
			} else {
				this.lous = "注销"
			}
		}
	};
</script>

<style>
	.box {
		flex: 1;
		display: flex;
		overflow: auto;
		flex-direction: column;
	}

	main {
		overflow: auto;
		flex: 1;
	}

	header {
		display: flex;
		justify-content: space-around;
		height: 2.3rem;
		background-color: red;
	}

	main .cont {
		height: 100rem;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		/* background-color: #0570DB; */
	}

	.cont img {
		width: 100%;
		height: 100%;
	}

	.van-swipe__track {
		height: 10rem;
	}
</style>
